{% extends "api_docs/base.html" %}
{% load i18n %}

{% block header %}
<link rel="stylesheet" href="{{ STATIC_URL  }}esb/api_docs/css/search.{{ CSS_SUFFIX }}">
    <style type="text/css">
        .description ul{
            padding-top: 25px;
        }
        .description ul li{
            font-size: 0;
            margin-bottom: 26px;
        }
        .description ul li a:hover{
            color: #57a3f1;
        }
        .card-img {
            position: absolute;
            bottom: 0;
            right: 10px;
            z-index: -1;
        }
        .card-box {
            padding-bottom: 15px;
        }
        .card-box .a-card {
            margin-top: 20px; 
        }
        .filter-input-style {
            border-radius: 4px;
            height: 35px;
        }
        /*kendo ui style*/
        .k-state-hover, .k-state-hover:hover {
            color: #fff;
            background-color: #ccc;
            background-image: none;
            border-color: #dddddd;
        }
        .k-list>.k-state-focused, .k-listview>.k-state-focused,
        .k-state-focused, td.k-state-focused {
            -webkit-box-shadow: inset 0 0 0 1px #8ebc00;
            box-shadow: inset 0 0 0 1px #dddddd;
        }
        .k-dropdown-wrap.k-state-default{
            background-color: #dddddd;
            background-image: none;
            border-color: #dddddd;
            border-radius: 4px;
        }
        .h3, h3 {
            font-size: 15px;
            margin-top: 10px;
            margin-bottom: 5px;
        }
        p {
            margin: 0 0 5px;
        }
        .span-style {
            color: #BDB0B0;
        }
        .k-list>.k-state-selected{
            background-color: #e1ddd8;
        }
        .k-list a{
            color: #3982C4;
            font-weight: normal;
        }
        .panel-title-text {
            position: relative;
            padding: 3px 15px;
            display: inline-block;
            background-color: #147BD0;
            color: white;
            float: left;
            font-size: 15px;
        }
        .form-horizontal .control-label {
            padding-top: 5px;
            margin-bottom: 0;
            text-align: right;
        }
        .page-content .docs-card .title{
            background: #Fff;
        }
        .page-content .card{
            width: 358px;
            padding: 0 30px;
            margin-right: 38px;
            display: inline-block;
            background: #fff;
            border: 1px solid #ccc;
            vertical-align: top;
        }
        .page-content .card:hover .title{
            border-bottom: 1px solid #57a3f1;
            color: #57a3f1;
            padding-left: 15px;
        }
        .page-content .card .title{
            -webkit-transition: all .5s;
            transition: all .5s;
            font-size: 18px;
            color: #4f515e;
            border-bottom: 1px solid #e5e5e5;
            line-height: 50px;
            padding-top: 10px;
        }
        .page-content .description a{
            font-size: 14px;
            color: #878996;
            letter-spacing: 2px;
           
        }
        .page-content{
            /*padding: 60px 0;*/
        }
        .page-content .card:nth-child(3){
            margin-right: 0;
        }
        .description ul li a span{
            color: #c5c5c5;
            font-size: 12px;
        }
    </style>
{% endblock %}

{% block main %}
<div class="main-page box-info" id="newVue">
    <div class="search-wrapper" id="searchApi">
        <div class="bk-search" style="display: none;" ref="content">
            <div style="display: inline-block;">
                <span class="title">{% trans "蓝鲸API查询" %}</span>
            </div>
            <div class="input-wrapper">
                <input type="text" class="bk-form-input"  v-model="searchText" @keyup="searchKeyWord" @click.focus="openPrompt" placeholder="{% trans '快速查找接口' %}">
                <ul class="search-result" v-if="searchResult.length" id="searchPrompt">
                    <li v-for="item in searchResult" @click="selectPrompt(item)">
                        <span v-text="item.system_name"  style="font-size: 16px; color: #333333"></span>
                        <span v-text="item.name" style="coloe: #7b7d8a"></span><br>
                        <span v-text="item.label" style="color: #a3a3a3"></span>

                    </li>
                </ul>
            </div>
            <div class="btn-select" @click.stop="openPrompt">
                <i class="bk-icon icon-angle-down"></i>
            </div>
        </div>
    </div>

    <div class="page-content">
        <div class="card-box">
            <div class="a-card clearfix" v-if="allModule.length" v-for="(item, index) in allModule" >
                <div class="card docs-card box" v-for="everyOne in item" style="height: 100%; ">
                    <div class="title" v-text="everyOne.label">
                    </div>
                    <div class="description">
                        <ul>
                            <li v-for="systemInfo in everyOne.systems">
                                <a :href="descriptionUrl + systemInfo.name " v-text="systemInfo.label"></a>
                                <span v-text="systemInfo.name"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
{% endblock %}

{% block footer %}
<script type="text/javascript" charset="utf-8">
var UrlMaker = {
    'tmpls': { 
        index: "{% url 'esb_api_docs' %}",
        api_doc: "{% url 'api_doc_by_api_name' system_name='__SYSTEM_NAME__' api_name='__API_NAME__' %}",
        all_api: "{% url 'api.all_api' %}",
        system_doc_category: "{% url 'api.get_system_doc_category' %}",

    },
    'make': function(tmpl_name, params) {
        var self = this;
        var result = self.tmpls[tmpl_name];
        $.each(params || {}, function(k, v){
            k = '__' + k.toUpperCase() + '__';
            result = result.replace(k, v);
        });
        return result;
    }
}
</script>
<script src="{{ STATIC_URL }}esb/assets/vue-2.4.2.js"></script>
<script src="{{ STATIC_URL }}esb/api_docs/js/search.{{ JS_SUFFIX }}"></script>
{% endblock %}
